<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background: red;
        }

        .box2 {
            background: skyblue;
            /* display: none; */
        }

        .box3 {
            background: pink;
            /* display: none; */
        }
    </style>
</head>

<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1">111</div>
    <div class="box2">222</div>
    <div class="box3">333</div>
    <script>
        // 选项卡 
        // 一、点击按钮的时候 先把所有的div隐藏  二、显示和点击按钮 下标一致的div

        var btns = document.querySelectorAll("button");
        var divs = document.querySelectorAll("div");


        // btns[0].onclick = function () {
        //     // 隐藏所有的div  : 干掉其他
        //     divs.forEach(function (item) {
        //         item.style.display = "none";
        //     })
        //     // 显示和点击当前button 下标一致的div： 显示自己
        //     divs[0].style.display = "block";
        // }



        // btns[1].onclick = function () {
        //     // 隐藏所有的div  : 干掉其他
        //     divs.forEach(function (item) {
        //         item.style.display = "none";
        //     })
        //     // 显示和点击当前button 下标一致的div： 显示自己
        //     divs[1].style.display = "block";
        // }

        // btns[2].onclick = function () {
        //     // 隐藏所有的div  : 干掉其他
        //     divs.forEach(function (item) {
        //         item.style.display = "none";
        //     })
        //     // 显示和点击当前button 下标一致的div： 显示自己
        //     divs[2].style.display = "block";
        // }


        // btns.forEach(function (btn, key) {
        //     btn.onclick = function () {
        //         // 隐藏其他
        //         divs.forEach(function (item) {
        //             item.style.display = "none";
        //         })
        //         // 显示和点击当前button 下标一致的div： 显示自己
        //         divs[key].style.display = "block";
        //     }
        // })




        // 二、显示和点击下标相同的div 隐藏其他的div

        // btns[0].onclick = function () {
        //     // 隐藏所有的div  : 干掉其他
        //     divs.forEach(function (item,k) {
        //         if(k==0){
        //             item.style.display = "block";
        //         }else{
        //              item.style.display = "none";
        //         }
        //     })
        // }

        // btns[1].onclick = function () {
        //     // 隐藏所有的div  : 干掉其他
        //     divs.forEach(function (item,k) {
        //         if(k==1){
        //             item.style.display = "block";
        //         }else{
        //              item.style.display = "none";
        //         }
        //     })

        // }
        // btns[2].onclick = function () {
        //     // 隐藏所有的div  : 干掉其他
        //     divs.forEach(function (item,k) {
        //         if(k==2){
        //             item.style.display = "block";
        //         }else{
        //              item.style.display = "none";
        //         }
        //     })
        // }


        // btns.forEach(function (btn, key) {
        //     btn.onclick = function (item, k) {
        //         btns.forEach(function(val,index){
        //             if(index==key){
        //                 val.style.background = "red";
        //             }else{
        //                 val.style.background = "";
        //             }
        //         })

        //         divs.forEach(function (item, k) {
        //             // 如果div下标 和点击的按钮下标一致 那么就显示div 否则就隐藏div
        //             if (k == key) {
        //                 item.style.display = "block";
        //             } else {
        //                 item.style.display = "none";
        //             }
        //         })
        //     }
        // })



        // 三、用for循环来实现选项卡 ；

        // btns.forEach(function (btn, key) {
        //     btn.onclick = function () {
        //         // 隐藏其他
        //         divs.forEach(function (item) {
        //             item.style.display = "none";
        //         })
        //         // 显示和点击当前button 下标一致的div： 显示自己
        //         divs[key].style.display = "block";
        //     }
        // })


        for (var i = 0; i < btns.length; i++) {
            (function (i) {
                btns[i].onclick = function () {
                    // console.log(111);
                    // 干掉其他div ：其他的都隐藏 
                    for (var j = 0; j < divs.length; j++) {
                        divs[j].style.display = "none";
                    }
                    // 显示自己；
                    // console.log(i);
                    divs[i].style.display = "block";
                }
            })(i)
        }





    </script>
</body>

</html>